import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
import AnimationCount from 'react-count-animation';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

import ItemInfo from '../../common/ItemInfo';
import { HOME_FIRST_PIE, THIRD_CHART_PIE, FOURTH_CHART_PIE, MONEY_CHART_PAR } from '../../config/echarts.config';

const settings = {
    start: 0,
    useGroup: true,
    animation: 'up',
}

const propTypes = {
    store: PropTypes.object.isRequired
}

@inject('store') 
@observer 
class BackImage extends PureComponent {
    constructor(props) {
        super(props);
        this.store = props.store;
        this.state = {
            homeFirstPie: {}
        };
        _.bindAll(this, [
            'initPieEchart',

        ]);
    }

    componentDidMount(){
        const store = this.store;
        store.getUserList(()=>{// const dataIndex = HOME_FIRST_PIE.series.length - 1;
            this.initPieEchart();
        });
        store.getAreaList();
    }

    // 初始化Echarts
    initPieEchart(){
        // const dataIndex = HOME_FIRST_PIE.series.length - 1;
        const store = this.store;
        let newUserList = Object.assign({}, store.userList && store.userList.data);
        let countSum = _.reduce(_.toArray(newUserList), (sum, n)=>{
            return sum + n.value;
            }, 0);
        HOME_FIRST_PIE.series[1].data = _.toArray(newUserList);
        HOME_FIRST_PIE.series[0].data[0].value = countSum;
        this.setState({
            homeFirstPie: HOME_FIRST_PIE
        })
    }

    render() {
        let props = this.props;
        const {
            areaList
        } = this.store;
        const {
            homeFirstPie
        } = this.state;
        return (
            <div className="back-img">
                <ItemInfo title="用户行业分布" className="position-r">
                    <div className="pie-bg"></div>
                    <ReactEcharts
                        option={ homeFirstPie }
                        style={{ height: 225 }}
                    />
                </ItemInfo>
                <ItemInfo title="项目在各省份融资情况">
                    <div className="tab-bg">
                        <div>
                            <div className="money-sum">累计融资：
                                <AnimationCount {...settings} count={areaList.data && areaList.data.money} duration={3000} /><span>元</span>
                                <AnimationCount {...settings} count={areaList.data && areaList.data.count} duration={1500} /><span>笔</span>
                            </div>
                            <div className="square-list"><i></i><i></i><i></i></div>
                        </div>
                        <div className="tab-box">
                            <table>
                                <thead>
                                    <tr>
                                        <th>省份</th>
                                        <th>一点车</th>
                                        <th>房贷</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        _.map(areaList.data && areaList.data.list , item=>{
                                            return <tr key={item.id}>
                                                <td>{item.name}</td>
                                                <td>{item.car} 元</td>
                                                <td>{item.house} 元</td>
                                            </tr>
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </ItemInfo>
                <ItemInfo title="各行业融资金额分布">
                    <div className="tab-bg">
                        <div>
                            <div className="money-sum">累计融资：
                                <AnimationCount {...settings} count={10000000000} duration={3000} /><span>元</span>
                                <AnimationCount {...settings} count={1000000} duration={1500} /><span>笔</span>
                            </div>
                            <div className="square-list"><i></i><i></i><i></i></div>
                        </div>
                        <div className="grid-tab">
                            <div className="item-box">
                                <ReactEcharts
                                    option={THIRD_CHART_PIE}
                                    style={{ width: 42, height: 42 }}
                                />
                                <div className="money-text">
                                    <span>消费</span>
                                    <AnimationCount {...settings} count={2387636478} duration={1500} />
                                </div>
                            </div>
                            <div className="item-box">
                                <ReactEcharts
                                    option={THIRD_CHART_PIE}
                                    style={{ width: 42, height: 42 }}
                                />
                                <div className="money-text">
                                    <span>消费</span>
                                    <AnimationCount {...settings} count={2387636478} duration={1500} />
                                </div>
                            </div>
                            <div className="item-box">
                                <ReactEcharts
                                    option={THIRD_CHART_PIE}
                                    style={{ width: 42, height: 42 }}
                                />
                                <div className="money-text">
                                    <span>消费</span>
                                    <AnimationCount {...settings} count={2387636478} duration={1500} />
                                </div>
                            </div>
                            <div className="item-box">
                                <ReactEcharts
                                    option={THIRD_CHART_PIE}
                                    style={{ width: 42, height: 42 }}
                                />
                                <div className="money-text">
                                    <span>消费</span>
                                    <AnimationCount {...settings} count={2387636478} duration={1500} />
                                </div>
                            </div>
                            <div className="item-box">
                                <ReactEcharts
                                    option={THIRD_CHART_PIE}
                                    style={{ width: 42, height: 42 }}
                                />
                                <div className="money-text">
                                    <span>消费</span>
                                    <AnimationCount {...settings} count={2387636478} duration={1500} />
                                </div>
                            </div>
                            <div className="item-box">
                                <ReactEcharts
                                    option={THIRD_CHART_PIE}
                                    style={{ width: 42, height: 42 }}
                                />
                                <div className="money-text">
                                    <span>消费</span>
                                    <AnimationCount {...settings} count={2387636478} duration={1500} />
                                </div>
                            </div>
                        </div>
                    </div>
                </ItemInfo>
                <ItemInfo title="各产业融资金融分布">
                    <div className="tab-bg">
                        <div>
                            <div className="money-sum">累计融资：
                                <AnimationCount {...settings} count={10000000000} duration={3000} /><span>元</span>
                                <AnimationCount {...settings} count={1000000} duration={1500} /><span>笔</span>
                            </div>
                            <div className="square-list"><i></i><i></i><i></i></div>
                        </div>
                        <div className="tab-box">
                            <ReactEcharts
                                option={FOURTH_CHART_PIE}
                                style={{ height: 150}}
                            />
                        </div>
                    </div>
                </ItemInfo>
            </div>
        )
    }
}

BackImage.propTypes = propTypes;

export default BackImage;